<template>
  <Category :scene="scene"></Category>
  <!-- 卡片 -->
  <el-card shadow="always" style="margin-top: 10px">
    <div v-show="scene == 0">
      <!-- 点击按钮 -->
      <el-button
        type="primary"
        size="default"
        :icon="Plus"
        :disabled="categoryStore.c3Id ? false : true"
        @click="addSpu"
        >添加SPU</el-button
      >
      <!-- 表格属性 -->
      <el-table
        border
        stripe
        style="margin: 10px"
        :data="records"
        v-loading="loading"
      >
        <el-table-column label="序号" width="80px" type="index" align="center">
        </el-table-column>
        <el-table-column label="SPU名称" prop="spuName" show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          label="SPU描述"
          prop="description"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column label="SPU操作">
          <template #="{ row, $index }">
            <el-button
              type="primary"
              size="small"
              :icon="Plus"
              title="添加SKU"
              @click="addSku(row)"
            ></el-button>
            <el-button
              type="warning"
              size="small"
              :icon="Edit"
              title="修改SKU"
              @click="updateSpu(row)"
            ></el-button>
            <el-button
              type="info"
              size="small"
              :icon="InfoFilled"
              title="查看SKU"
              @click="findSkuList(row)"
            ></el-button>
            <el-button
              type="danger"
              size="small"
              :icon="Delete"
              title="删除SKU"
              @click="deleteSpu(row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination
        layout="prev, pager, next,jumper,->,sizes,total"
        v-model:current-page="pageNo"
        v-model:page-size="pageSize"
        @size-change="sizeChange"
        @current-change="getHasSpuList"
        background
        :total="total"
        :page-sizes="[3, 5, 7, 9]"
      />
    </div>
    <SpuFrom ref="spu" v-show="scene == 1" @changeScene="changeScene"></SpuFrom>
    <SkuFrom ref="sku" v-show="scene == 2" @changeScene="changeScene"></SkuFrom>
  </el-card>
  <el-dialog title="spu列表" v-model="showDialog" style="margin-top: 100px">
    <el-table :data="skuArr" border v-loading="loadings">
      <el-table-column label="SKU名称" prop="skuName"> </el-table-column>
      <el-table-column label="SKU价格" prop="price"> </el-table-column>
      <el-table-column label="SKU重量" prop="weight"> </el-table-column>
      <el-table-column label="SKU图片">
        <template #="{ row, $index }">
          <img :src="row.skuDefaultImg" alt="" style="width: 100px" />
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
// 导入spu子组件
import SpuFrom from "./spuForm.vue";
// 导入sku子组件
import SkuFrom from "./skuForm.vue";
// 获取的是icon的图标库
import { Plus, Edit, Delete, InfoFilled } from "@element-plus/icons-vue";
// 导入提示信息的
import { ElMessage } from "element-plus";
// 导入小仓库
import useCategoryStore from "@/stores/catrgory";
// 导入定义的接口的类型
import type { Records, SpuResponseData } from "@/api/product/spu/type/index";
// 导入接口的请求
import { reqSpuList, reqDeleteSpu, reqSkuList } from "@/api/product/spu/index";
// 获取仓库的对象
const categoryStore = useCategoryStore();
// 获取的是当前的页数
const pageNo = ref<number>(1);
// 获取的是当前页面要显示的数据条数
const pageSize = ref<number>(3);
// 总共获取到参数的条数
const total = ref<number>(0);
// 存储获取到的数据的空数组
const records = ref<Records>([]);
// 控制加载的效果
const loading = ref<boolean>(false);
// 场景切换的值
const scene = ref<number>(0);
// 获取到ref对象
const spu = ref<any>();
// 创建skuref对象
const sku = ref<any>();
// 控制dialog的显示
const showDialog = ref<any>(false);
// 存储全部的SKU列表数据
const skuArr = ref<any>([]);
// 加载效果
const loadings = ref<any>(false);
// 监视
watch(
  () => categoryStore.c3Id,
  () => {
    reset();
    categoryStore.c3Id && getHasSpuList();
  }
);
// 发送请求的函数的回调
const getHasSpuList = async (pager = 1) => {
  // 加载效果
  loading.value = true;
  // 更新当前的数据
  pageNo.value = pager;
  // 发送请求获取到数据
  let result: SpuResponseData = await reqSpuList(
    pageNo.value,
    pageSize.value,
    categoryStore.c3Id
  );
  // 存储的数据
  total.value = result.total;
  records.value = result.records;
  // 加载效果
  loading.value = false;
};
// 获取到数组中请求的数据
const sizeChange = (pageSizes: number) => {
  // 整理参数
  pageSize.value = pageSizes;
  // 重新发送请求
  getHasSpuList();
};
// 清空数据
const reset = () => {
  records.value = [];
  total.value = 0;
};
// 添加spu的回调函数
const addSpu = () => {
  scene.value = 1;
  // 重新的渲染数据
  spu.value.initAddSpu(categoryStore.c3Id);
};
// 添加sku的回调函数
const addSku = (row: any) => {
  console.log(row);
  scene.value = 2;
  // 调用子组件
  sku.value.initAddSku(categoryStore.c1Id, categoryStore.c2Id, row);
};
// 更新spu的回调函数
const updateSpu = (row: any) => {
  scene.value = 1;
  // 调用子方法
  spu.value.initHasSpu(row);
};
// 自定义绑定事件,取消按钮触发
const changeScene = (obj: any) => {
  scene.value = obj.scene;
  // 在次更新数据发送请求
  if (obj.flag == "update") {
    getHasSpuList(pageNo.value);
  } else {
    getHasSpuList();
  }
};
// 查看全部的回调函数
const findSkuList = (row: any) => {
  // 上次的SKU列表数据清空一次
  skuArr.value = [];
  // 点击展示
  showDialog.value = true;
  //
  findSkuArr(row.id);
};
// 获取已有的回调函数
const findSkuArr = async (id: number) => {
  // 显示加载效果
  loadings.value = true;
  // 发送请求
  const result = await reqSkuList(id);
  // 保存
  skuArr.value = result;
  // 关闭加载效果
  loadings.value = false;
};
// 删除的回调函数
const deleteSpu = async (row: any) => {
  try {
    // 删除spu成功
    await reqDeleteSpu(row.id);
    // 删除成功的提示
    ElMessage({
      type: "success",
      message: "删除成功",
    });
    // 获取spu
    getHasSpuList();
  } catch (error) {
    // 删除失败的提示信息
    ElMessage({
      type: "error",
      message: "删除失败",
    });
  }
};
</script>
<script lang="ts">
export default {
  name: "Spu",
};
</script>

<style scoped></style>
